<template>
  <li class="Item">
    <label>
      <input type="checkbox" :checked="todo.done" @click="changed(todo)"/>
<!--      如下也可以实现修改功能，但不建议，因为违反了原则，修改了props-->
<!--      <input type="checkbox" v-model="todo.done"/>-->
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" @click="deleted1(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "Item",
  //接受对象
  props:['todo','change','deleteTodo'],
  methods:{
    changed(todo) {
      this.change(todo)
    },
    deleted1(id){
      if(confirm('你确定么？'))
      this.deleteTodo(id)
    }
  }
}
</script>

<style scoped>
.Item{
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid darkgray;
  border-radius: 4px;
  padding: 0px
}
li:hover{
  background-color: darkgray;

}

</style>
